玩转地图可视化|3D飞线效果——让线“飞”起来的秘密
在城市规划、统计、交通等行业，地图可视化已成为最直接也最吸引眼球的一种表达方式。例如人群迁徙、人口流动、OD出行、职住分析、客流来源等众多场景都需要用到飞线效果呈现。
2D飞线效果图
随着可视化技术的进一步发展，传统的2D飞线效果略显单调，而3D飞线可以展示更丰富、更直观、更炫酷的效果。
3D飞线效果图
前不久，百度地图慧眼结合地图可视化技术发布了《帝都24小时图鉴》（戳这里查看原文），该项目受到行业内许多技术爱好者的一致好评，更有小伙伴前来咨询：文中炫酷的3D飞线效果是如何实现的？今天，就让百度地图慧眼前端工程师带你探寻“3D飞线”飞起来的秘密。
01
元素准备
为了实现上图的3D飞线效果，我们需要先分析一下飞线的构成元素。大致上来说，一个完整的飞线效果，无论是2D还是3D，都是由地点、连接线和连接线上的动画点缀构成的。下面，带大家一步步来看看每个部分的实现过程。
02
地点圆的实现
地点圆的组成元素有两样，一个静态的圆形和一个向外逐渐扩散并变透明的圆环。画出这两个图形并不难，但是怎么让这个扩散的圆环动起来呢？
要实现动画，我们可以首先想象一个场景：在一个小本子上的每一页都画一个一模一样的没有腿的小人儿，再在每一页给这个小人画上位置不同的腿，然后快速翻动本子，就可以看到小人儿奔跑的动画了。
现在圆形和圆环都已经画好了，为了让圆环动起来，就需要使用一个名为requestAnimationFrame的函数，简称rAF，rAF是浏览器里专门用于动画效果的一个函数。所以接下来我们在全局设置一个rAF让它一直循环，然后在其中进行一些动画操作，比如这里修改圆环的大小和透明度。而这个rAF就是“画腿”的过程。
03
连接线的实现
画完了点，我们就要开始准备连接线了。画一条连接线很简单，但是这里为了让它的效果更丰富，就需要处理了一下线条的细节：
1）通过贝塞尔曲线算法，将直线拉成曲线，在3D视角下看起来更有张力。
2）给组成曲线的每个顶点赋值不同的颜色，达到颜色、透明度渐变的效果，使其看起来不那么单调。
04
让线“飞起来”
完成了上述的准备工作，接下来才是重头戏。
首先，我们在连接线的轨迹上再给它附着上一根带有宽度的线作为点缀，为了避免这根点缀的线看起来太呆，我们用三角函数处理一下它的宽度，让它看起来扭曲一点。然后，我们就要用到上文所说的rAF让它动起来了！
那么问题来了，控制颜色和透明度很简单，该怎么控制它按轨迹移动以及出现与消失呢？
这里用到一个小技巧，我们知道“线”有一个实线与虚线的属性，在这里我们把这根点缀线设置成虚线，然后通过在rAF里修改虚线的dashOffset属性，让它沿着连接线的轨迹一直偏移，就可以在视觉上造成移动的效果了~另外，还可以在rAF里同时改变点缀线的宽度，造成一种“呼吸感”的动画效果，这样上面的动画就完成了。
可是这样的效果还略显呆板，太过整齐划一的动画看久了容易审美疲劳，所以我们再给这个虚线的长度加一份随机的偏移，让它们有一种不规律感。这样，最终版3D飞线就完成了！
05
更多可能效果
之所以说在3D场景，飞线的效果更丰富，就是因为在上面的基础上，我们可以继续发挥，做出更多效果、适配更多场景的飞线~
比如，换个贴图后的样子：
模仿喷泉的样子：
模仿流星的样子：
百度地图慧眼3D飞线可视化技术，使得人群迁徙、人口流动、OD出行、职住分析、客流来源等场景得以生动、形象表达，有助于城市规划、统计、交通等行业的可视化管理。下图是百度地图慧眼人口监测可视化大屏的效果样例：
推荐阅读
如果以上你还没有看过瘾，那么欢迎来到百度地图开放平台本期线下活动——“地图可视化应用”技术沙龙，在这里，你可以与百度地图资深研发、产品负责人、大数据可视化产品开源创始人一起面对面交流和切磋当前及未来地图可视化会如何发展及应用。
识别下方图中二维码或戳阅读原文即可报名参与，我们6月29日不见不散！